<template>
	<view class="container">
		<!-- <view class="title">钱包充值</view> -->
		<view class="recharge jc">
			<!-- <view class="unit jcc c"  :class="pay_status==1?'pay_unit_current':''" id="1"  v-on:click="pay_radio">
				<view>100元</view>
			</view> -->
			<view class="unit jcc c"  :class="pay_status==2?'pay_unit_current':''" id="2"  v-on:click="pay_radio">
				<view>200元</view>
			</view>
			<view class="unit jcc c"  :class="pay_status==3?'pay_unit_current':''" id="3"  v-on:click="pay_radio">
				<view>500元</view>
				<!-- <view>送50元</view> -->
			</view>
			<view class="unit jcc c" :class="pay_status==4?'pay_unit_current':''" id="4"  v-on:click="pay_radio">
				<view>1000元</view>
				<!-- <view>送100元</view> -->
			</view>
			<view class="unit jcc c"  :class="pay_status==5?'pay_unit_current':''" id="5"  v-on:click="pay_radio">
				<view>2000元</view>
				<!-- <view>送200元</view> -->
			</view>
		</view>
		<view class="button" v-show="display==0" v-on:click="pay_submit">马上充值</view>
		<rich-text :nodes="content"></rich-text>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				width:0,
				height:0,
				balance:0,
				pay_status:0,
				content:'',
				display:0,
				url: getApp().globalData.url,
				img_url:getApp().globalData.static
			}
		},
		onLoad(options) {
			//#ifdef MP-WEIXIN
			console.log(options)
			var res      = wx.getSystemInfoSync();
			this.width   = res.windowWidth+"px";
			this.height    = res.windowHeight+"px";
			this.balance = uni.getStorageSync("balance");
			//#endif
			this.get_member_info();
		},
		onShow(){
		},
		methods: {
			pay_radio:function(e)
			{
				if(this.pay_status==parseInt(e.currentTarget.id))
				{
					this.pay_status = 0;
				}
				else
				{
					this.pay_status = parseInt(e.currentTarget.id);
				}
			},
			get_member_info:function()
			{
				var member_id = uni.getStorageSync("member_id");
				var that = this;
				wx.request({
					url:this.url+'/wechat_member_info',
					data: {member_id:member_id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res.data);
						that.content = res.data.content;
						// that.balance = res.data.member[0]['remaining_sum'];
						// that.grade   = res.data.grade[0]['grade'];
					}
				})
			},
			pay_submit:function(e)
			{
				var m_id = uni.getStorageSync("m_id");
				var that = this;
				uni.request({
					url: that.url+'/wechat_recharge_pay', 
					data: {pay_status: that.pay_status,m_id:m_id},
					header: { 'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res);
						that.wechat_pay(res.data.appId,res.data.nonceStr,res.data.package,res.data.paySign,res.data.signType,res.data.timeStamp);
					}
				});
			},
			wechat_pay:function(appId,nonceStr,Package,paySign,signType,timeStamp)
			{
				var that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: timeStamp,
					nonceStr: nonceStr,
					package: Package,
					signType: 'MD5',
					paySign: paySign,
					success: function (res) {
						// console.log('success:' + JSON.stringify(res));
						if(res.errMsg=="requestPayment:ok")
						{
							that.update_order_status();
						}
					},
					fail: function (err) {
						// console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			update_order_status:function()
			{
				var m_id = uni.getStorageSync("m_id");
				var that = this;
				uni.request({
					url: this.url+'/wechat_recharge_order_status', 
					data: {m_id: m_id,pay_status: that.pay_status},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						if(res.data.status==1)
						{
							uni.showToast({title:"支付成功！",duration:5000,
										   success:function(){
												uni.redirectTo({
													url:'/pages/space/success?type=2'
												});
										   }})
						}
					}
				});
			}
		}
	}
</script>
<style>
	page{width:100%;background: #d3dee4;}
	.container{width:100%;}
	.banner{width:100%;background: #78bdc2;height: 320upx;display: flex;justify-content: center;align-items: center;flex-direction: column;}
	.balance{font-size: 40upx;color: #FFFFFF;margin-top: 50upx;}
	.assets{font-size: 40upx;color: #FFFFFF;}
	.title{width:94%;padding:0 3% 0 3%;height: 60upx;line-height: 60upx;font-size: 28upx;background: #FFFFFF;margin-bottom:20upx;}
	.recharge{width:94%;padding:0 3%;display: flex;margin-bottom:20upx;flex-wrap: wrap;}
	.jc{justify-content: space-between;}
	.jcc{justify-content: center;}
	.ml{margin-left: 4%;}
	.q{background: #e1d95d;}
	.h{background: #78bdc2;}
	.c{background: #acce31;}
	.unit{width:48%;height:180upx;display: flex;align-items: center;flex-direction: column;font-size: 48upx;color: #FFFFFF;border-radius: 15upx;margin:20upx 0;}
	.pay_unit_current{background: #78bdc2 !important;}
	.unit image{width:40upx;height: 40upx;}
	.con{width:94%;padding:0 3%;font-size: 28upx;line-height: 60upx;}
	.button{width:94%;margin:10upx 3%;height: 100upx;line-height: 100upx;border-radius: 50upx;text-align: center;position: fixed;bottom: 0;
	        background-image: linear-gradient(#43eac9, #24c3a4);color: #FFFFFF;font-size: 32upx;}
</style>